<template>
  <div class="teach">
    <el-button type="primary" @click="add"
      ><el-icon style="margin-right: 2px"><Plus /></el-icon>新建</el-button
    >
    <div style="margin-top: 20px" v-if="formList && formList.length">
      <template v-for="(item, index) in formList" :key="index">
        <div class="teach-form-box">
          <el-form
            ref="form"
            style="max-width: 1200px"
            :model="formList[index]"
            :rules="rules"
            label-position="top"
          >
            <el-form-item label="标题">
              <el-input v-model="item.biaoti"> </el-input>
              <el-button
                style="min-width: auto"
                link
                class="del-btn"
                type="primary"
                size="small"
                @click.prevent="deleteTeach(index)"
                >删除</el-button
              >
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" rows="5" v-model="item.miaoshu">
              </el-input>
            </el-form-item>
            <el-form-item label="上传视频">
              <bjz-oss
                :previewList="item.shipin"
                :accept="['.mp4']"
                :size="100"
                :nowIndex="index"
                @success="success"
                @remove="remove"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
    </div>

    <el-form-item style="margin-top: 50px">
      <el-button type="primary" @click="submitForm()">提交信息</el-button>
    </el-form-item>
  </div>
</template>
<script setup>
import { GetTeachList, EditTeach } from "@/api/system.ts";
import upimg from "@/assets/icon-upload.png";
import { baseMsg } from "@/utils/utils";
import { ref } from "vue";
const formList = ref([]);
const item = {
  biaoti: "",
  miaoshu: "",
  shipin: [],
};
// 文件上传
const success = (res, index) => {
  formList.value[index].shipin.push(res);
};
// 清除文件
const remove = () => {
  formList.value[index].shipin = [];
};
// 新增
const add = () => {
  formList.value.push(item);
};
// 删除
const deleteTeach = (index) => {
  formList.value.splice(index, 1);
};
// 提交
const submitForm = () => {
  EditTeach({ caozuojiaocheng: formList.value }).then((res) => {
    if (res.code == 4201 || res.code == 4202) {
      baseMsg("编辑操作教程成功");
      GetList();
    }
  });
};
const GetList = () => {
  GetTeachList().then((res) => {
    if (res.code == 4201) {
      formList.value = res.data;
    }
  });
};
GetList();
</script>
<style lang="scss">
.teach-form-box {
  .el-form-item__content {
    flex-wrap: nowrap;
    .del-btn {
      margin-left: 20px;
    }
  }
}
</style>
<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}
.content {
  border: none !important;
  background-color: transparent !important;
}
.teach {
  padding: 20px 32px;
  .form-box {
    padding-top: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
}
</style>
